<template>
  <div class="system-menu-container">
    <div class="breadcrumb-box">
      <Breadcrumb />
    </div>

    <div class="page-main flex space-between" ref="pageMain">
      <el-card shadow="hover" style="width:35%;height:100%;" v-loading="state.tableData.loading">

        <div class="output-box">
          <el-input class="search-item" placeholder="请输入医生名称或职工代码" v-model="state.apiData.search" size="default"
            style="width: 220px;" clearable @change="searchChange()">
          </el-input>
          <el-button size="default" type="primary" @click="searchChange()" :icon="Search"
            style="margin-left: 20px;">查询</el-button>
        </div>

        <el-table :data="state.tableData.data" border style="width: 100%" :height="state.tableHeight"
          ref="multipleTableRef" @row-click="handleRowClick" :row-style="rowStyle">
          <el-table-column prop="account" label="职工代码" show-overflow-tooltip align="center"></el-table-column>
          <el-table-column prop="name" label="职工姓名" show-overflow-tooltip align="center"></el-table-column>
        </el-table>


        <div class="pagination-box">
          <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
            :pager-count="3" :page-sizes="[10, 20, 30]" v-model:current-page="state.apiData.page"
            v-model:page-size="state.apiData.pageSize" layout="total, prev, pager, next, jumper"
            :total="state.tableData.total" small>
          </el-pagination>
        </div>

      </el-card>

      <el-card v-if="state.activeId" shadow="hover" style="width:64%;height:100%;"
        v-loading="state.rightTableData.loading">
        <div class="output-box flex space-between">
          <div>
            <el-input class="search-item" placeholder="请输入手术名称或手术代码" v-model="state.rightApiData.search" size="default"
              style="width: 220px;" clearable @change="rightSearchChange()">
            </el-input>
            <el-select v-model="state.rightApiData.departmentId" placeholder="请选择科室" size="default" clearable filterable
              style="width:200px;margin-left:20px;">
              <el-option v-for="(item, index) in state.departmentList" :key="index" :label="item.departmentName"
                :value="item.id"></el-option>
            </el-select>
            <el-button size="default" type="primary" @click="rightSearchChange()" :icon="Search"
              style="margin-left: 20px;">查询</el-button>
          </div>

          <el-button size="default" type="primary" @click="checkAll()">{{ state.isAllCheck ? '取消全选' : '全选' }}</el-button>
        </div>
        <el-table :data="state.rightTableData.data" border style="width: 100%" :height="state.tableHeight">
          <el-table-column prop="code" label="手术代码" show-overflow-tooltip align="center" width="150"></el-table-column>
          <el-table-column prop="name" label="手术名称" show-overflow-tooltip align="center" min-width="250"></el-table-column>
          <el-table-column label="手术部位id" align="center">
            <template #default="scope">
              {{ scope.row ? '-' : '-' }}
            </template>
          </el-table-column>
          <el-table-column label="手术切口id" align="center">
            <template #default="scope">
              {{ scope.row ? '-' : '-' }}
            </template>
          </el-table-column>
          <el-table-column label="手术分类id" align="center">
            <template #default="scope">
              {{ scope.row ? '-' : '-' }}
            </template>
          </el-table-column>
          <el-table-column label="手术职称" align="center">
            <template #default="scope">
              {{ scope.row ? '-' : '-' }}
            </template>
          </el-table-column>
          <el-table-column label="对应标志" align="center" width="100" fixed="right">
            <template #default="scope">
              <el-checkbox v-model="scope.row.sign" @change="signChange(scope.row.id, scope.row.sign)">
                {{ }}
              </el-checkbox>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-box">
          <el-pagination @size-change="onHandleSizeChangeRight" @current-change="onHandleCurrentChangeRight" class="mt15"
            :pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.rightApiData.page"
            v-model:page-size="state.rightApiData.pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="state.rightTableData.total" small>
          </el-pagination>
        </div>
      </el-card>


    </div>


  </div>
</template>

<script setup name="entryAndExit-doctorOperation-index">
import { getCurrentInstance } from 'vue';
import { entryAndExitApi } from '/@/api/entryAndExit'
import { toolsApi } from '/@/api/tools'
import {
  Search,
} from '@element-plus/icons-vue'

// 引入组件
const Breadcrumb = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/breadcrumb.vue'));


// 定义变量内容
const state = reactive({
  apiData: {
    page: 1,
    pageSize: 10,
    search: '',
    departmentId: '',
    isChief: true
  },
  tableData: {
    data: [],
    loading: false,
    total: 0
  },
  tableHeight: '30vh',
  activeId: '',
  rightApiData: {
    page: 1,
    pageSize: 10,
    search: '',
    chiefId: '',
    isDaySign: true
  },
  rightTableData: {
    data: [],
    loading: false,
    total: 0
  },
  isAllCheck: false
});

// 页面加载时
onMounted(() => {
  getDepatment()
  getList()
  state.tableHeight = getCurrentInstance().refs.pageMain.offsetHeight - 130 - 52 + "px";
});

const searchChange = () => {
  state.apiData.page = 1
  getList()
}


const rightSearchChange = () => {
  state.rightApiData.page = 1
  getRightList()
}

// 获取科室
const getDepatment = () => {
  toolsApi().departmentList().then(res => {
    state.departmentList = res.data
  })
}


const handleRowClick = (row) => {
  state.activeId = row.id
  state.rightApiData.chiefId = row.id
  getRightList()
}

// 如果当前行index 是点击行，就改变颜色
const rowStyle = ({ row, rowIndex }) => {
  if (row.id == state.activeId) {
    return {
      'background-color': 'rgba(48, 129, 244, 0.08) !important'
    }
  }
}


// 分页改变
const onHandleSizeChange = (val) => {
  state.apiData.pageSize = val;
  getList();
};
const onHandleCurrentChange = (val) => {
  state.apiData.page = val;
  getList();
};

// 分页改变
const onHandleSizeChangeRight = (val) => {
  state.rightApiData.pageSize = val;
  getRightList();
};
const onHandleCurrentChangeRight = (val) => {
  state.rightApiData.page = val;
  getRightList();
};






// 获取列表
const getList = () => {
  state.tableData.loading = true
  entryAndExitApi().doctorAccessList(state.apiData).then(res => {
    state.tableData.loading = false
    state.tableData.data = res.data.items
    state.tableData.total = res.data.total
  }).catch(() => {
    state.tableData.loading = false
  })
}

const getRightList = () => {
  state.rightTableData.loading = true
  entryAndExitApi().operationAccessList(state.rightApiData).then(res => {
    state.rightTableData.loading = false
    state.rightTableData.data = res.data.items
    state.rightTableData.total = res.data.total

    let checkedIdList = []
		res.data.items.forEach(item => {
			if (item.sign ) {
				checkedIdList.push(item.id)
			}
		})
		if (checkedIdList.length == res.data.items.length) {
			state.isAllCheck = true
		} else {
			state.isAllCheck = false
		}
  }).catch(() => {
    state.rightTableData.loading = false
  })
}

const signChange = (operationId, sign) => {
  console.log(sign)
  const apiData = {
    uid: state.rightApiData.chiefId,
    operationIds: [operationId],
    action: sign ? 'attach' : 'detach'
  }
  entryAndExitApi().setChiefOperation(apiData).then(res => {
    getRightList()
  })
}

const checkAll = () => {
	const allIdList = []
	state.rightTableData.data.forEach(item => {
		allIdList.push(item.id)
	})

	const apiData = {
    uid: state.rightApiData.chiefId,
		operationIds: allIdList,
		action: state.isAllCheck ? 'detach' : 'attach'
	}
	entryAndExitApi().setChiefOperation(apiData).then(res => {
		getRightList()
	})
}



</script>

<style lang="scss" scoped>
.el-checkbox.el-checkbox--large {
  height: 32px !important;
}

.page-main {
  height: calc(100vh - 106px);
}




.output-box {
  margin-bottom: 20px;
}
</style>
